<template>
    <div>


        <div>
            <a-spin :spinning="loading" size="large" class="loading-spinner" />
        </div>

        <div class="Ivstandard show-pc" v-show="!loading">
            <div v-show="!loading">

                <div class="title">
                    <div class="title_lift">{{ labelName }}</div>
                    <div class="title_right">
                        <div>排序：</div>
                        <div class="simple-tabs">
                            <div v-for="(tab, index) in prevent" :key="index"
                                :class="{ 'active': activeIndex === index }" @click="activeIndex = index">
                                {{ tab.name }}
                            </div>
                        </div>

                    </div>
                </div>
                <div class="WaterfallFlow">
                    <div class="LeftNavigation">
                        <div class="Left_title">
                            <div class="text">全部</div>
                            <div class="jiantou"><img src="../../assets/images/new_img/箭头.png" alt=""></div>
                        </div>
                        <div style=" margin-top: 25px;">
                            <div class="Select" v-for="item in tabsprevent" :key="item.name"
                                :class="{ 'selected': selectedItem === item.type }" @click="selectItem(item.type)">
                                <div class="Select_png"><img :src="iconEnum[item.type]" :alt="item.name"></div>
                                <div class="Select_text">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="WaterfallFlow_item">
                        <Waterfall :col="3" :data-source="list" @toDetail="handleTodetails">
                            <template #default="{ item }">
                                <Card :item />
                            </template>
                        </Waterfall>
                    </div>

                </div>
            </div>
        </div>

        <div class="show-wap">
            <div v-show="!loading">


                <div class="title-wap">
                    <div>
                        <!-- 全部下拉菜单 -->
                        <a-dropdown v-model:visible="tabsVisible" :trigger="['click']" placement="bottomRight"
                            overlayClassName="custom-dropdown-all">
                            <a class="ant-dropdown-link">
                                {{ allDisplayText }}
                                <DownOutlined :class="['arrow-icon-all', { 'arrow-up-all': tabsVisible }]" />
                            </a>
                            <template #overlay>
                                <a-menu @click="handleAllMenuClick">
                                    <a-menu-item v-for="(item, index) in tabsprevent" :key="index"
                                        :class="['custom-menu-item', { 'selected-menu-item': selectedAllItem === index }]">
                                        <span class="menu-item-text" style="color: var(--color-text-6);">{{ item.name
                                        }}</span>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                    <div>
                        <!-- 排序下拉菜单 -->
                        <a-dropdown v-model:visible="dropdownVisible" :trigger="['click']" placement="bottomRight"
                            overlayClassName="custom-dropdown-sort">
                            <a class="ant-dropdown-link">
                                {{ sortDisplayText }}
                                <DownOutlined :class="['arrow-icon', { 'arrow-up': dropdownVisible }]" />
                            </a>
                            <template #overlay>
                                <a-menu @click="handleSortMenuClick">
                                    <a-menu-item v-for="(item, index) in prevent" :key="index"
                                        :class="['custom-menu-item', { 'selected-menu-item': selectedSortItem === index }]">
                                        <span class="menu-item-text" style="color: var(--color-text-6);">{{ item.name
                                        }}</span>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>

                <div class="WaterfallFlow_item-wap">
                    <Waterfall :col="3" :data-source="list" @toDetail="handleTodetails" style="padding:0px !important;">
                        <template #default="{ item }">
                            <Card :item />
                        </template>
                    </Waterfall>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>

import Waterfall from '@/components/Waterfall/index.vue'
import Img_1 from '../../assets/images/new_img/图形.png'
import Img_2 from '../../assets/images/new_img/色彩库.png'
import Img_3 from '../../assets/images/new_img/辅助图形.png'

import img_1 from "../../assets/images/local_img/img_1.png"
import img_2 from "../../assets/images/local_img/img_2.png"

import img_3 from "../../assets/images/local_img/img_3.png"
import img_4 from "../../assets/images/local_img/img_4.png"
import img_5 from "../../assets/images/local_img/img_5.png"
import img_6 from "../../assets/images/local_img/img_6.png"
import img_7 from "../../assets/images/local_img/img_7.png"
import img_8 from "../../assets/images/local_img/img_8.png"
import img_9 from "../../assets/images/local_img/img_9.png"
import img_10 from "../../assets/images/local_img/img_10.png"
import { useStore } from '@/store'
const { themeStore } = useStore()

import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const labelName = ref('');
const selectedItem = ref(null)
const selectItem = (type) => {
    selectedItem.value = type
}



const activeIndex = ref(0);

watch(() => {
    labelName.value = themeStore.searcShow.title
});

const iconEnum = ref({
    1: Img_1,
    2: Img_2,
    3: Img_3,
    4: Img_1,
    5: Img_2,
    6: Img_3
})


const tabsVisible = ref(false);
const dropdownVisible = ref(false);
const selectedAllItem = ref(null);
const selectedSortItem = ref(null);

const tabsprevent = ref([
    {
        name: "LOGO",
        type: 1

    },
    { name: "色彩", type: 2 },
    { name: "辅助图形", type: 3 },

]);

const prevent = ref([
    { name: '全部' },
    { name: '热门下载' },
    { name: '最新上传' }
]);

const allDisplayText = computed(() => {
    return selectedAllItem.value !== null
        ? tabsprevent.value[selectedAllItem.value].name
        : '类别';
});

const sortDisplayText = computed(() => {
    return selectedSortItem.value !== null
        ? prevent.value[selectedSortItem.value].name
        : '排序';
});

const handleAllMenuClick = ({ key }) => {
    selectedAllItem.value = key;
    tabsVisible.value = false;
};

const handleSortMenuClick = ({ key }) => {
    selectedSortItem.value = key;
    dropdownVisible.value = false;
};

const list = ref([
    {
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    },
    {
        imgurl: img_3,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_2,
        text: "档期活动物料",
        name: "作家sss"
    }, {
        imgurl: img_5,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_7,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_1,
        text: "图片5",
        name: "作家"
    },


])

const handleTodetails = ({ index }) => {

    router.push(`/details/${1}`)

}

// 加载状态控制
const loading = ref(true)

// 模拟数据加载
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1500) // 1.5秒后关闭加载状态
})



</script>

<style lang="less" scoped>
.Ivstandard {
    width: 95.83333333333334vw;

    margin: 0 auto;
    margin-top: 40px;


    .title {
        width: 100%;
        height: 50px;

        display: flex;
        justify-content: space-between;
        line-height: 50px;

        .title_lift {

            height: 1.14vw;
            font-family: MicrosoftYaHei-Bold;
            font-size: 1.14vw;
            color: var(--color-text-3);
        }



        .title_right {

            display: flex;
            justify-content: space-around;
            gap: 20px;
            font-size: 0.83vw;
            color: var(--color-text);


            .simple-tabs {
                display: flex;
                gap: 20px;
            }

            .simple-tabs div {
                cursor: pointer;
            }

            .simple-tabs div.active {
                color: var(--color-Sel);
            }
        }
    }



    .WaterfallFlow {
        display: flex;
        justify-content: space-around;

        .LeftNavigation {
            width: 13vw;
            height: 100vw;
            margin-top: 0.88vw;
            box-shadow: 15px 0 20px -15px rgba(120, 120, 120, 0.1),
                -15px 0 20px -15px rgba(120, 120, 120, 0.1);
            border-radius: 0.20vw;
            background-color: var(--color-bg-20);

            .Left_title {
                width: 100%;
                height: 1.97vw;
               
                display: flex;
                justify-content: space-between;
                color: var(--text-color);
                background-color: var(--ba-sel);
                line-height: 1.97vw;
                border-radius: 2px;
               

                .text {
                    width: 20%;
                    text-align: center;
                    font-size: 0.83vw;
                    margin-left: 0.52vw;
                }

                .jiantou {
                    width: 20%;
                    text-align: center;
                    margin-right: 0.52vw;

                    >img {
                        width: 1vw;
                        height: 0.53vw;
                    }
                }
            }

            .Select {
                width: 100%;
                height: 1.97vw;
                display: flex;
                align-items: center;
                padding-left: 0.72vw;
                font-size: var(--text-16);
                color: var(--color-text);

                .Select_png {
                    width: auto;

                    >img {
                        width: 0.9vw;
                        height: 0.8vw;
                    }
                }

                .Select_text {
                    width: auto;
                    margin-left: 0.72vw;

                }

            }




        }

        .WaterfallFlow_item {
            flex: 1;
            margin-left: 1.04vw;
            margin-top: 0.88vw;

        }


    }

}

.Select.selected {
    background-color: var(--ba-sel);

}

.Select.selected .Select_text {
    color: var(--ba-sel-t);
}

// 手机样式
.show-wap {
    width: 95%;
    margin: 0 auto;

    .title-wap {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        gap: 18px;

        .ant-dropdown-link {
            font-size: 16px;
            color: var(--color-text-3);
            display: flex;
            align-items: center;
        }

        // 箭头样式
        .arrow-icon,
        .arrow-icon-all {
            transition: transform 0.3s ease;
            margin-left: 8px;
            color: var(--color-text-3);

            &.arrow-up,
            &.arrow-up-all {
                transform: rotate(180deg);
            }
        }

        // 菜单项样式
        :deep(.custom-menu-item) {

            padding: 5px 12px !important;

            .menu-item-text {
                display: inline-block;
                border: 1px solid red;
            }




        }

        .ant-dropdown-menu-title-content {
            color: red !important;
        }

        :deep(.ant-menu-item-selected) {
            background-color: transparent !important;
        }
    }



    /* 选中状态样式 */
    .Select-wap.selected-wap .Select_text-wap {
        color: var(--color-Sel);
    }

    .Select-wap.selected-wap::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 2px;
        background-color: var(--color-Sel);
    }


    .WaterfallFlow_item-wap {
        flex: 1;
        // margin-left: 20px;
        // margin-top: 17px;
        padding-bottom: 80px;



    }
}
</style>